<template>
  <div class="seach" :active="active">
    <input type="text" placeholder="关键字" ref="keyword" @focus="active = true" @blur="active = false" @keydown.enter="seach">
    <svg class='icon' aria-hidden='true' @click="seach">
      <use xlink:href='#icon-sousuo'></use>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'Seach',

  data() {
    return {
      active: false
    };
  },

  methods: {
    // 抛出输入框内容
    seach(){
      this.$emit('seach',this.$refs.keyword.value)
    }
  },
};
</script>

<style scoped>
.seach{
  width: 200px;
  height: 30px;
  cursor: pointer;
  display: flex;
  border: 1px solid gray;
  position: relative;
  transition: all .5s;
  overflow: hidden;
}
.seach input{
  width: 100%;
  display: block;
  border: none;
  outline: none;
  border-radius: 10px;
  padding-left: 5px;
}
.seach .icon{
  font-size: 30px;
  position: absolute;
  top: 0;
  right: 0;
  transform: scale(1.3);
}
.seach[active]{
  border: 1px solid rgb(131, 160, 255);
  box-shadow: 0 0 2px rgb(73, 70, 255);
}
</style>